$main-nav-width: 68px;
$nav-item-height: 68px;

$nav-m-btn-width: 58px;
$nav-m-btn-height: 42px;

$main-color: #535353;
$main-act-color:#272829;

nav {
    width: $main-nav-width;
    background: $main-color;

    .logo-box {
        width: 100%;
        height: 100%;
        background: white url('../../assets/images/logo.png') no-repeat center;
        background-size: 70%;
        border-radius: 0 0 50% 50%;
    }



    > ul {
        li {
            height: $nav-item-height;
            margin-bottom: 10px;

            &:last-child {
                margin-top: 64px;
                margin-bottom: 0;
            }

            &#nav-logo {
                height: 60px;
            }

            &.m-btn {
                height: 48px;
            }

            &#nav-avatar {
                width: 56px;
                height: 56px;
                margin: 12px auto;
            }

            .m-btn-box{
                width: $nav-m-btn-width;
                height: $nav-m-btn-height;
                float: right;
                background-color: rgb(128, 128, 128);
                border-radius: 20% 0 0 20%;
                background-size: 55%!important;

                a {
                    display: block;
                    width: 100%;
                    height: 100%;
                }

                &.workbench{
                    background: transparent url(../../assets/images/icons/menu_class.png) no-repeat center;
                    &:hover, &.active {
                        background-image: url(../../assets/images/icons/menu_class_active.png);
                    }
                }

                &.chat {
                    background: transparent url(../../assets/images/icons/menu_chat.png) no-repeat center;
                    &:hover, &.active {
                        background-image: url(../../assets/images/icons/menu_chat_active.png);
                    }
                }

                &.record {
                    background: transparent url(../../assets/images/icons/menu_record.png) no-repeat center;
                    &:hover, &.active {
                        background-image: url(../../assets/images/icons/menu_record_active.png);
                    }
                }

                &.calendar{
                    background: transparent url(../../assets/images/icons/menu_calendar.png) no-repeat center;
                    &:hover, &.active {
                        background-image: url(../../assets/images/icons/menu_calendar_active.png);
                    }
                }

                &.email{
                    background: transparent url(../../assets/images/icons/menu_email.png) no-repeat center;
                    &:hover, &.active {
                        background-image: url(../../assets/images/icons/menu_email_active.png);
                    }
                }

                &.personal{
                    background: transparent url(../../assets/images/icons/menu_personal.png) no-repeat center;
                    &:hover, &.active {
                        background-image: url(../../assets/images/icons/menu_personal_active.png);
                    }
                }

                &.setting{
                    background: transparent url(../../assets/images/icons/menu_setting.png) no-repeat center;
                    &:hover, &.active {
                        background-image: url(../../assets/images/icons/menu_setting_active.png);
                    }
                }


                &:hover, &.active {
                    background-color: $main-act-color;
                }

            }
        }
    }


}
